<template>
	<view class="con">
		<!-- 列表 -->
		<view class="list">
			<!-- 每一个li -->
			<view class="listli" v-for="(item,index) in addressList" :key="index">
				<view class="listlit flex flex_between">
					<view class="listlitz">{{item.city}}</view>
					<view class="listlity flex">
						<image class="listlity_img" mode="widthFix" src="/static/index/img07.png"></image>
						<view class="listlity_v">{{item.money}}</view>
					</view>
				</view>
				<view class="listlim">
					<view class="listlimc flex">
						<view class="listlim_1">电话:</view>
						<view class="listlim_2">{{item.tel.substring(0, 7)}}<text>{{item.tel.substring(7, 11)}}</text></view>
					</view>
					<view class="listlimc flex">
						<view class="listlim_1">地址:</view>
						<view class="listlim_2">{{item.address}}</view>
					</view>
				</view>
				<view class="dibuc flex flex_between">
					<view class="dibucz" @click="copyHandle(item)">克隆</view>
					<view class="dibucy flex">
						<!-- <view class="dibucy1" @click="showTan">报备</view> -->
						<view class="dibucy2" @click="copyText(item)">复制</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="isShow_2" @click="hideTan_2"></view>
		<!-- 点击报备弹出 -->
		<view class="tan" v-if="isShow">
			<view class="tan_title">报备信息</view>
			<view class="tan_t flex">
				<view class="tan_newli_wrap">
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">该号码及地址报备后，将与您在本平台的账号ID做绑定，产生的佣金将结算到您的账号</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">报备后，您将可以使用该信息用于快递回收</view>
					</view>
				</view>

			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d1" @click="hideTan">取消</view>
				<view class="tan_b_d2">确认</view>
			</view>
		</view>
		<!-- 点击 克隆 弹窗 -->
		<view class="tan" v-if="isShow_2">
			<view class="tan_title">克隆号码</view>
			<!-- <image class="kelong_img" src="/static/index/img20.png" mode="widthFix"></image> -->
			<view class="tan_t flex">
				<view class="tan_newli_wrap">
					<view class="tan_newli flex">
						<!-- <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image> -->
						<view class="tan_newli_v">
              <view class="xinze_t1">建议号段(131/132/134/135/136/137/138/139/151/156/158/159/186/188/133/153/189)，请确定号码为空号，<text class="xinze_t2">不确定请拨打确认，避免产生纠纷</text></view>
              <!-- <view class="xinze_t2"></view> -->
            </view>
					</view>
				</view>

			</view>
			<view class="shuruk flex">
				<view class="shuruk_v1">{{copyInfo.tel.substring(0, 1)}}</view>
				<input class="shuruk_v2" :class="phoneIsError?'red':''" type="number" v-model="phone" placeholder="请输入6位数字" maxlength="6" @input="changPhone" />
				<view class="shuruk_v1">{{copyInfo.tel.substring(7, 11)}}</view>
			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d1" @click="hideTan_2">取消</view>
				<view class="tan_b_d2" @click="sureBtn">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
  import {
    expressMyExpress, //我的快递
    expressCopyAdr //克隆地址号码
  } from '@/request/api.js'
	export default {
		data() {
			return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
				isShow: false,
				isShow_2: false,
        phone:'',//克隆弹框-输入的电话
        phoneIsError:false,//克隆弹框-输入的电话是否正确
        addressList:[], //地址列表
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15,//每页数量
        copyInfo:{}//选中的克隆对象
			};
		},
    onLoad() {
      this.expressMyExpressFun() //我的地址
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
		methods: {
      // 我的地址
      expressMyExpressFun(){
        let param = {
          openid:this.openid,
          page:this.page
        }
        expressMyExpress(param).then(res=>{
          console.log('我的地址列表')
          console.log(res)
          if(res.error_code===0){
            this.total = Number(res.data.total);
            this.pagesizes = Number(res.data.pagesizes);
            let listRe = res.data.arrList
            if(listRe.length>0){
              this.addressList = this.addressList.concat(listRe);
            }
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.expressMyExpressFun()
      },
      // 克隆地址号码
			copyHandle(item) {
        console.log('选中的克隆对象')
        console.log(item)
        this.copyInfo = item
				this.isShow_2 = true
			},
			hideTan_2() {
				this.isShow_2 = false
			},
      // 输入克隆-电话号码
      changPhone(e){
        let value = e.detail.value
        console.log(value)
        if(value===''){
          this.phoneIsError = false
        }
      },
      // 前2位数字必须上述的，如果出现其他的提示错误
      isValidPrefix(number, validPrefixes) {
        const regex = new RegExp(`^(${validPrefixes.join('|')})`);
        return regex.test(number);
      },
      // 点击-克隆弹窗-确认按钮
      sureBtn(){
        const validPrefixes = ['31','32','34','35','36','37','38','39','51','56','58','59','86','88','33','53','89'];
        let phone = Number(this.phone)
        console.log('输入的电话数字是：')
        console.log(phone)
        if(!this.isValidPrefix(phone, validPrefixes)){
          uni.showToast({
            icon:'none',
            title:'请输入正确的电话号码'
          })
          this.phoneIsError = true
        }else if(phone.toString().length<6){
          uni.showToast({
            icon:'none',
            title:'请输入正确的电话号码'
          })
        }else{
          let param = {
            openid:this.openid,
            id:this.copyInfo.id,
            tel:phone
          }
          console.log(phone.toString().length)
          console.log('克隆参数')
          console.log(param)
          expressCopyAdr(param).then(res=>{
            if (res.error_code === 0) {
              uni.showToast({
                icon: 'none',
                title: '克隆成功'
              })
              this.isShow_2 = false
              this.page = 1
              this.addressList = []
              this.expressMyExpressFun()
            } else {
              uni.showToast({
                icon: 'none',
                title: res.msg
              })
            }
          })
        }
      },
      // 点击"复制"
      copyText(item){
        console.log('点击"复制"')
        console.log(item)
        let text = '电话:'+item.tel+'\n地址:'+item.address
        uni.setClipboardData({
          data: text,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      },
		}
	}
</script>

<style scoped lang="scss">
	.list {
		width: 100%;
		height: auto;

		.listli {
			width: 100%;
			height: 380rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: rgba(255, 255, 255, 1);
			// margin-top: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.listlit {
				width: 100%;
				height: auto;
				margin-bottom: 24rpx;

				.listlitz {
					height: 50rpx;
					font-weight: bold;
					line-height: 50rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					border-bottom: 4rpx solid rgba(249, 191, 65, 1);
				}

				.listlity {
					width: 190rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 25px;
					background-color: rgba(238,238,238,1);
					justify-content: center;
					// margin-right: 22rpx;
          
					.listlity_img {
						width: 32rpx;
						height: auto;
						margin-right: 24rpx;
					}

					.listlity_v {
						width: 90rpx;
						text-align: center;
            color: rgba(16,16,16,1);
            font-size: 28rpx;
					}
				}
			}

			.listlim {
				width: 100%;
				height: 132rpx;

				.listlimc {
					width: 100%;
					height: auto;
					line-height: 40rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					align-items: normal;
					margin-bottom: 8rpx;

					.listlim_1 {
						width: 80rpx;
					}

					.listlim_2 {
						width: 620rpx;
						max-height: 90rpx;
						overflow: hidden;
            font-family: 'AvantGardeFont';
						text {
							color: rgba(249, 191, 65, 1);
							;
						}
					}
				}
			}

			.listlib {
				width: 100%;
				height: auto;
				margin-top: 50rpx;
				align-items: baseline;

				.listlib_1 {
					color: rgba(0, 0, 0, 1);
					font-size: 24rpx;
					margin-right: 16rpx;

					text {
						font-size: 50rpx;
						font-family: 'AvantGardeFont';
					}
				}

				.listlib_2 {
					color: rgba(137, 137, 137, 1);
					font-size: 24rpx;

					text {
						font-family: 'AvantGardeFont';
						margin: 0 4rpx;
					}
				}
			}
		}

		.dibuc {
			width: 100%;
			height: auto;
			margin-top: 50rpx;

			.dibucz {
				width: 160rpx;
				height: 48rpx;
				border-radius: 40rpx;
				background-color: rgba(0, 0, 0, 1);
				color: rgba(249, 191, 65, 1);
				font-size: 28rpx;
				text-align: center;
				line-height: 48rpx;
			}

			.dibucy {
				.dibucy1 {
					width: 160rpx;
					height: 48rpx;
					border-radius: 40rpx;
					background-color: rgba(249, 65, 65, 1);
					color: #fff;
					font-size: 28rpx;
					text-align: center;
					line-height: 48rpx;
				}

				.dibucy2 {
					width: 160rpx;
					height: 48rpx;
					border-radius: 40rpx;
					background-color: rgba(211, 211, 211, 1);
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
					text-align: center;
					line-height: 48rpx;
					margin-left: 20rpx;
				}

				.dibucy3 {
					width: 160rpx;
					height: 48rpx;
					border-radius: 40rpx;
					background-color: rgba(249, 191, 65, 1);
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
					text-align: center;
					line-height: 48rpx;
					margin-left: 20rpx;
				}
			}
		}


	}

	.tan_title {
		color: rgba(16, 16, 16, 1);
		font-size: 32rpx;
	}

	.tan_newli_wrap {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;

		.tan_newli {
			width: 100%;
			align-items: normal;
			margin-bottom: 15rpx;

			.tan_newli_img {
				width: 32rpx;
				height: auto;
				margin-right: 6rpx;
				margin-top: 6rpx;
			}

			.tan_newli_v {
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				font-size: 24rpx;
				width: 500rpx;
        .xinze_t1{
          width: 100%;
          word-break: break-all;
        }
        .xinze_t2{
          font-weight: bold;
        }
			}
		}

		.tan_newli:last-child {
			margin-bottom: 0;
		}
	}

	.tan {
		margin-top: -296rpx;
	}

	.kelong_img {
		width: 100%;
		height: auto;
		margin-bottom: 10rpx;
	}

	.shuruk {
		margin-top: 48rpx;

		.shuruk_v1 {
			font-family: 'AvantGardeFont';
			color: rgba(16, 16, 16, 1);
			font-size: 60rpx;
		}

		.shuruk_v2 {
			height: 72rpx;
			line-height: 40rpx;
			border-radius: 10rpx;
			background-color: rgba(238, 238, 238, 1);
			color: rgba(136, 136, 136, 1);
			font-size: 28rpx;
			padding: 0 20rpx;
			margin: 0 12rpx;
		}
    .shuruk_v2.red{
      color: #f00;
    }
	}
  .tan .tan_t {
      width: 100%;
      height: auto;
      margin: 0 auto;
      align-items: normal;
      background-color: rgba(255,246,228,1);
      padding: 20rpx 0;
  }
</style>